<template>
  <!-- 新增目录 -->
  <div class="DirectorysAdd">
    <el-form
      :model="directorysAddForm"
      :rules="rules"
      ref="directorysAddForm"
      label-width="100px"
      class="demo-directorysAddForm"
    >
      <el-form-item label="所选学科" prop="subjectID ">
        <el-select placeholder="请选择" v-model="directorysAddForm.subjectID">
          <el-option
            v-for="(item, index) in subjectList"
            :key="index"
            :label="item.label"
            :value="item.value"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="目录名称" prop="directoryName">
        <el-input
          v-model="directorysAddForm.directoryName"
          placeholder="请输入目录名称"
        ></el-input>
      </el-form-item>
      <span class="dialog-footer">
        <el-button @click="$emit('close')">取 消</el-button>
        <el-button type="primary" @click="submitAddForm">确 定</el-button>
      </span>
    </el-form>
  </div>
</template>
<script>
// 导入获取前端列表的接口
import { simple } from '@/api/hmmm/subjects'
// 导入获添加目录的接口
import { add, update } from '@/api/hmmm/directorys'
export default {
  name: 'DirectorysAdd',
  components: {},
  props: {
    // 父组件传递的目录信息
    editQuery: {
      type: Object,
      required: false
    }
  },
  data() {
    return {
      rules: {
        directoryName: [
          { required: true, message: '请输入目录名称', trigger: 'blur' }
        ]
      },
      directorysAddForm: {
        subjectID: '', // 学科
        directoryName: '', // 目录名称
        id: '' // 点击修改按钮会使用
      },
      subjectList: ''
    }
  },
  computed: {},
  watch: {},
  created() {
    if (this.editQuery) {
      this.directorysAddForm.subjectID = this.editQuery.subjectID
      this.directorysAddForm.directoryName = this.editQuery.directoryName
      this.directorysAddForm.id = this.editQuery.id
    }
    this.getSubjectList()
  },
  mounted() {},
  methods: {
    // 渲染下拉列表
    async getSubjectList() {
      const { data } = await simple()
      // console.log(data)
      this.subjectList = data // 学科
      // this.$emit('adddirectorys')
    },
    submitAddForm() {
      this.$refs.directorysAddForm.validate(async valid => {
        // 如果获取到的表单数据有效
        if (valid) {
          // 成功
          try {
            // 如果传递的值是存在的
            if (this.editQuery) {
              await update(this.directorysAddForm)
              this.$emit('updateDirectory')
              this.$message.success('修改数据成功')
            } else {
              console.log(this.directorysAddForm)
              await add(this.directorysAddForm)
              this.$emit('addDirectory')
              this.$message.success('添加数据成功')
            }
            // 触发获取数据事件
          } catch (error) {
            this.$message.error('获取数据失败')
          }
          this.$emit('close')
        }
      })
    }
  }
}
</script>
<style rel="stylesheet/scss" lang="scss" scoped>
::v-deep .el-input__inner {
  width: 200px;
}
.dialog-footer {
  margin-left: 200px;
}
</style>
